<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>

<%@ taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<base href="<%=basePath%>">
		<title>上传物品 - ichange</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		
		<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
		<link href="<%=request.getContextPath()%>/skin/created_files/manage_course.css" rel="stylesheet" type="text/css"/>
		<link href="<%=request.getContextPath()%>/skin/created_files/rrshare.css" rel="stylesheet" type="text/css"/>
		
		<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/common/css/style.css" />
		<script src="<%=request.getContextPath()%>/common/js/jquery-1.7.1.min.js" type="text/javascript"></script>
		
		<link href="<%=request.getContextPath()%>/common/component/css/uploadify/uploadify.css"  rel="stylesheet" type="text/css" />
		<script type="text/javascript" id="uploadifyjs" src="<%=request.getContextPath()%>/common/component/uploadify/jquery.uploadify.js"></script>
		
		<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/common/component/css/jquery-ui/jquery.ui.dialog.css" />
		<script src="<%=request.getContextPath()%>/common/js/jsmodel.js" type="text/javascript"></script>
		<script src="<%=request.getContextPath()%>/common/component/jquery-ui/ui/jquery.ui.core.js" type="text/javascript"></script>
		<script src="<%=request.getContextPath()%>/common/component/jquery-ui/ui/jquery.ui.widget.js" type="text/javascript"></script>
		<script src="<%=request.getContextPath()%>/common/component/jquery-ui/ui/jquery.ui.position.js" type="text/javascript"></script>
		<script src="<%=request.getContextPath()%>/common/component/jquery-ui/ui/jquery.ui.dialog.js" type="text/javascript"></script>
		<script src="<%=request.getContextPath()%>/common/js/jquery.timers-1.2.js" type="text/javascript"></script>
		
		<script src="<%=request.getContextPath()%>/dwr/engine.js" type="text/javascript"></script>
		<script src="<%=request.getContextPath()%>/dwr/util.js" type="text/javascript"></script>
		<script src="<%=request.getContextPath()%>/dwr/interface/itemsDwrController.js" type="text/javascript"></script>
		
		<script language="javascript" type="text/javascript" src="datePicker/WdatePicker.js"></script>
		
	</head>
	<script type="text/javascript">
	var _media_="<%=request.getContextPath()%>/system";
	var itemTag='';
	$(document).ready(function() {
	//生成照片对应物品的伪标记
	    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
	    for (var i = 1; i <= 16; i++) {
	    	itemTag += chars[Math.floor(Math.random() * chars.length)];
	        if(i%4==0&&i!=16){
	        	itemTag+="-"
	        }
	    }
	  
	//相片上传
	$('#upload_photos').upload({
	     post_params : {
	     type : 'picture',//picture,document,video,all
	     module : 'group-album',
	     sizes:'130x130,460x'
	     },
	      buttonText:'选择图片',
		  fileSizeLimit:2048,/*KB*/
		  fileTypeDesc:'物品图片文件',
		  fileTypeExts:'*.jpg;*.jpeg;*.gif;*.png',
//		  uploadLimit:10,//允许上传图片的数
//		  queueSizeLimit:5,//允许上传队列数(一次可以选中多少张)
	      multi : true, //多选
	      auto : false,
	      removeCompleted : true,
	      onSuccess : function(fileName,data) {
	      if(data.result){
	    	  $('#msg').empty();
	       	if(data.media.status!=1){
	       		$('#msg').html("图片片上传失败,请重新上传!");
	       		$('#upload_dialog').dialog({
	    			autoOpen: true,
	    			width: 380,
	    			height: 240,
	    			modal: true,
	    			title: "消息提示",
	    			close: function(){
	    				},
	    			buttons: {
	    				"重新上传":function(){
	    					$(this).dialog("close");
	    				}/* ,"查看":function(){
	    					//跳转到相片详细页面
	    				} */
	    			}
	    		});
	         }else {
	        	 $('#msg').html("图片上传成功!");
	        		$('#upload_dialog').dialog({
	     			autoOpen: true,
	     			width: 380,
	     			height: 240,
	     			modal: true,
	     			title: "消息提示",
	     			close: function(){	
	     				},
	     			buttons: {
	     				"继续上传":function(){
	     					$(this).dialog("close");
	     				}/* ,"查看":function(){
	     					//跳转到相片详细页面
	     				} */
	     			}
	     		});
	          }


	     }else{
	        JSModel.JQuery.alert(data.errorMsg,"error");						
	       }
	     
	     },
	    
	     addFileQueueItem:function(queueID,cancelImage,fileID,fileName,fileSize){
	    	
	    	 $('#share_fileList_tbody').append(
	 				'<div id="' + fileID + '" class="uploadifyQueueItem" style="max-width:758px;height:15px;background-color: #FFF;">'+
	 				'<div class="cancel" style="">'+
	 				'<a href="javascript:$(\'#' + $(this).attr("id") + '\').uploadifyCancel(\'' + fileID + '\')"><img src="' + cancelImage + '" border="0" /></a>'+
	 				'</div>'+
	 				'<div style="float:left;width:278px;">'+
	 				'<span class="fileName">' + fileName + ' (' + fileSize + ')</span>'+
	 				'</div>'+
	 				'<div class="uploadifyProgress" style="float:left;width:260px;margin-top:0px;">'+
	 				'<div class="uploadifyProgressBar" style="height: 15px;"></div>'+
	 				'</div>'+
	 				'<div style="float:left;width:80px;">'+
	 				'<span class="data" style="float:right"></span>'+
	 				'</div></div>'
	 			 );
		 }
	    
	  });
		$("#upload_img").click(function(){
			$("#uploadDiv").dialog({
	 			autoOpen: true,
	 			width: 780,
	 			height: 530,
	 			modal: true,
	 			title: "上传图片",
	 			close: function(){
				imageView();
					},
	 			buttons: {
	 				"close":function(){
	 					$(this).dialog("close");
	 				}
	 			}
	 		});
		});
		$("#parentId").change(function(){
			 var carnameValue = $(this).val();
			 var ht="";
			 if (carnameValue != "0") {
				 itemsDwrController.queryItemSonType(carnameValue,function(res){
					 $("#sonId").html("");
                     $("<option value='0'>-请选择-</option>").appendTo($("#sonId"));
					 for(var i=0;i<res.length;i++){
						 var bean = res[i];
						 $("<option value='"+bean.id+"'>"+bean.name+"</option>").appendTo($("#sonId"));
					 }
				 });
			 }
			 $("#sonId").show();
		});
		$("#submitItem").click(function(){
			$("#itemForm").attr("action", '<%=path %>/itemsObjectAction!uploadItemsInfo.action?itemTag='+itemTag);
			$("#itemForm").submit();
		});

		$(".image_a1").live('click',function(){
			var imageId=$(this).parent().parent().attr("id");
			if($(this).text()=="移除"){
				 JSModel.JQuery.confirm("您确认移除此图片？",function(){
					 itemsDwrController.deleteTagImage(imageId,function(rel){
							if(rel>0){
								JSModel.JQuery.showMsg("操作成功!");
								imageView();
							}else{
								JSModel.JQuery.showMsg("删除失败，请从新操作!","error");
							}
					  });
					 
				 });
			}
		});
		
	}); 

	function imageView() {
		itemsDwrController.imageForPreview(itemTag,function(list){
			var Div="";
			$('#imagePreview').html(Div);
			for(var i=0;i<list.length;i++){
				var image = list[i];
				Div+=" <span id='"+image.id+"'><p><img src='<%=path%>/imageTag/"+image.name+"' style='width:110px;height:130px;'/></p>"; 
				Div+="<p><a id='del' class='image_a1' title='移除'>移除</a></p></span>";
			}
			$('#imagePreview').html(Div);
		});
	}


	
</script>
	<body id="course_manage">
		<jsp:include page="/user/header.jsp"></jsp:include>
		<!--end header-->
		<div id="content" class="content cf">
		<form action="#" method="post" id="itemForm">
			<p id="sub_nav">
				<a href="#">上传物品</a>
			</p>
			<div class="main fl">
				<div class="main_hd"></div>
				<div class="main_bd">
					<!-- 用户上传第一步：物品信息 -->
					<div class="base_info" style="background: url(./public/c1.png) left 15px no-repeat;">
						<div id="edit_course_info" style="margin-top: 30px;">
							<dl class="info_item" id="title_item">
								<dt class="cf">
									<label for="course_title" class="fl">物品名称</label>
								</dt>
								<dd class="title_wrapper">
									<input id="itemTltle" name="product.title" type="text" value="" class="title_input required"/>
								</dd>
							</dl>
							<dl class="cf">
								<dt class="cf">
									<label for="course_title" class="fl">物品分类</label>
								</dt>
								<dd class="title_wrapper" style="height: 60px; margin-top: 10px;">
									<span class="fl">物品大类:&nbsp;&nbsp;&nbsp;</span>
									<select id="parentId" name="product.parentType.id" class="fl" style="height: 30px; width: 110px; margin-left: 0px;">
										<option value="0">-请选择-</option>
										<s:iterator value="parentTypeList" var="parentType">
											<option value="<s:property value="#parentType.id" />"><s:property value="#parentType.name" /></option>
										</s:iterator>
									</select>
									<span class="fl">&nbsp;&nbsp;&nbsp;物品小类:&nbsp;&nbsp;&nbsp;</span>
									<select id="sonId" name="product.sonType.id" class="fl"style="height: 30px; width: 110px; margin-left: 0px;">
										<option value="0">-请选择-</option>
									</select>
								</dd>
							</dl>

							<dl class="info_item" id="detail_item">
								<dt class="cf">
									<label for="course_detail" class="fl">内容简介</label>
								</dt>
								<dd class="detail_wrapper">
									<textarea id="description" name="product.content" class="detail_textarea"></textarea>
								</dd>
							</dl>
							<dl class="info_item" id="upload_item">
								<dt class="cf">
									<a class="upload_img fl" id="upload_img" 
									rel="wokaobox" style="margin-left: 0px; margin-top: 20px; margin-bottom: 20px;">上传</a>
								</dt>
								<dd class="detail_wrapper">
									<label for="upload_img" class="fl">图片预览</label><br>
									<div class="">
								        <div>
								            <span id="imagePreview"></span>
								        </div>
								    </div>
								</dd>
							</dl>
							
						</div>
					</div>
					<!-- 用户上传第一步：物品信息 -->
					<!-- end main content -->
					<!-- 用户上传第二步：物品报价和需求属性 -->
					<dl class="item" id="time_item"
						style="background: url(./public/manage_course_price_icon-37-37-20120323.gif) 22px 22px no-repeat; border-top: 1px solid #f2f2f2;">
						<h2 style="font: bolder 18px '黑体';">物品报价</h2>
						<dd class="edit_wrap" style="">
							<div style="margin-top: 20px; margin-bottom: 20px;">
								<font style="font: normal 15px ''; margin-top: 10px;">请输入您的价位:</font>
								<font style="color: #CDB38B">(请合理出价)</font>
							</div>
							<div class="edit cf">
								<span class="datetime_wrap fl" style="height: 30px; text-align: center; margin: auto;">
									<input name="product.price" type="text" class="datetime fl hasDatepicker" value="" autocomplete="off"
										style="padding-top: 10px; text-align: center; border-color: #D4D4D4; font: bold 15px Microsoft YaHei;"/>
								</span>
								<span class="fl">&nbsp;&nbsp;&nbsp;交易方式:&nbsp;&nbsp;&nbsp;</span>
								<select style="height: 30px;" id="product.extendType" name="product.extendType" class="fl">
									<option value="0" selected="selected">
										现金交易
									</option>
									<option value="1">
										网上付款
									</option>
									<option value="2">
										银行转帐
									</option>
									<option value="3">
										其他
									</option>
								</select>
							</div>
						</dd>
					</dl>
					<!-- 用户上传第二步：物品报价和需求属性 -->
				</div>
				<!-- end main body -->
				<div class="main_ft"></div>
			</div>

			<!-- 需求物品 -->
			<div class="main fl">
				<div class="main_hd"></div>
				<div class="main_bd">
					<div class="base_info" style="background: url(./public/c2.png) left 15px no-repeat;">
						<div id="edit_course_info" style="margin-top: 30px;">
							<dl class="info_item" id="title_item">
								<dt class="cf">
									<label for="course_title" class="fl">物品名称</label>
								</dt>
								<dd class="title_wrapper">
									<input id="wantTitle" name="product.wantTitle" type="text" value="" class="title_input required">
								</dd>
							</dl>
							<dl class="info_item" id="detail_item">
								<dt class="cf">
									<label for="course_detail" class="fl">内容简介</label>
								</dt>
								<dd class="detail_wrapper">
									<textarea id="wantDescription" name="product.wantDescription"class="detail_textarea" style="height: 50px;"></textarea>
								</dd>
							</dl>
						</div>
					</div>
					<!-- end main content -->
				</div>
				<!-- end main body -->
				<div class="main_ft"></div>
			</div>
			<!-- 需求物品 -->

			<!-- 用户上传第3步：物品报价和需求属性 -->
			<div class="main fl">
				<div class="main_bd">
					<div class="main_content">
						<div id="item_wrap">
							<dl class="item" id="time_item">
								<dt>交易时间</dt>
								<dd class="item_content cf" style="display: block;">
									<div class="fl"><p>填写具体交易时间</p></div>
								</dd>
								<dd class="edit_wrap" style="">
									<div class="edit cf">
										<span class="datetime_wrap fl"> 
											<input type="text" id="" onFocus="WdatePicker({startDate:'%y-%M-%d %H:%m:%s',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})"
											 class="Wdate" readonly="readonly" name="product.extendTime"/> 
										</span>
									</div>
								</dd>
							</dl>
							<dl class="item" id="config_item">
								<dt>交易地点</dt>
								<dd class="edit_wrap" style="">
									<div class="edit cf" id="capacity_item" style="margin-bottom: 20px;">
										<p style="color: #000; display: block; float: left; margin-bottom: 20px; margin-top: 5px;">请选择校区:</p>
										<div style="margin-right: 20px; width: 550px; background-color: ; height: px; float: right; margin-left: 0px;">
											<select id="course_length" name="courseLength" class="fl" style="height: 30px; width: 80px;">
												<option value="60">
													福建省
												</option>
												<option value="120">

												</option>
												<option value="180">
													3小时
												</option>
												<option value="240">
													4小时
												</option>
											</select>
											<select id="course_length" name="courseLength" class="fl" style="margin-left: 20px; margin-right: ; height: 30px; width: 80px;">
												<option value="60">
													福州市
												</option>
												<option value="120">
													2小时
												</option>
												<option value="180">
													3小时
												</option>
												<option value="240">
													4小时
												</option>
											</select>
											<select id="course_length" name="courseLength" class="fl" style="width: 200px; height: 30px;">
												<option value="60">
													福建农林大学
												</option>
												<option value="120">
													2小时
												</option>
												<option value="180">
													3小时
												</option>
												<option value="240">
													4小时
												</option>
											</select>
										</div>
										<div class="fl" style="margin-top: 20px;">
											<label for="capacity" style="margin-top: 10px;">具体地点</label>
										</div>
										<div class="fl" style="height: 60px; margin-top: 20px;">
											<input type="text" name="product.extendAddress" id="extendAddress" class="title_input required" value="" min="1"
												style="height: 20px; margin-left: 20px; width: 337px; border-color: #D4D4D4;" max="40"/>
										</div>
										<span class="error_wrapper fl"></span>
									</div>
									<div class="edit" id="video_item">
										<label for="vedio_radio_off">是否邮寄？</label>
										<div class="set_video">
											<input type="radio" id="product.isPost" name="isPost"
												value="false" class="vedio_radio" checked="checked">
											<label for="vedio_radio_off">是</label>
											<input type="radio" id="isPost" name="isPost"
												value="true" class="vedio_radio">
											<label for="vedio_radio_on">否</label>
										</div>
										<div>
											<div class="fl" style="margin-top: 20px;">
												<label for="capacity" style="margin-top: 10px;">收件地址</label>
											</div>
											<div class="fl" style="height: 60px; margin-top: 20px;">
												<input type="text" name="postAddress" id="product.postAddress" class="title_input required" value="" min="1"
													   style="height: 20px; margin-left: 20px; width: 337px; border-color: #D4D4D4;" max="40"/>
											</div class="fl">
										</div>
									</div>
								</dd>
							</dl>
						</div>
					</div>
					<!-- end main content -->
				</div>
				<!-- end main body -->
				<div class="main_ft"></div>
			</div>
			<!-- 用户上传第步：物品报价和需求属性 -->
			<!-- end main -->
			<!-- 确认上传 -->
			<div class="main fl">
				<div class="main_hd"></div>
				<div class="main_bd">
					<div class="base_info" style="background: url(./public/c4.png) left 15px no-repeat;">
						<div id="edit_course_info" style="margin-top: 30px;">
							<dl class="info_item" id="title_item">
								<dt class="cf">
									<label for="course_title" class="fl">确认上传到你的仓库中</label>
								</dt>
							</dl>
							<dl class="info_item" id="detail_item">
								<a href="javascript:void(0);" id="submitItem" name="submitItem"><img src="public/cbut.png"/></a>
							</dl>
						</div>
					</div>
					<!-- end main content -->
				</div>
				<!-- end main body -->
				<div class="main_ft"></div>
			</div>
			<!-- 确认上传 -->
			</form>
		</div>
		<!-- 弹出上传图片窗口 -->
	<div class="upload_photo_w"  id="uploadDiv" style="display:none;background-color: #E5E5E5;">
			<div class="upload_photo_box">
				<div class="lf">
					<a id="upload_photos"></a>
				</div>
				<div class="rf">
					<a id="upload_temporary_btn" style="margin-right: 5px" class="img_btn" href="javascript:jQuery('#upload_photos').uploadAll()">开始上传</a> 
				<!--	<a id="del_batch" href="javascript:jQuery('#upload_photos').cancelAll()" class="img_btn">全部取消</a>  -->
				</div>
				<div class="clear"></div>
			</div>
			<div class="upload_photo_t">
				<table>
					<tr align="center">
						<th style="width: 278px;" id="order_share_file_name">照片名称</th>
						<th style="width: 400px;" id="order_share_size">状态</th>
						<th style="width: 100px;">操作</th>
					</tr>
				</table>
			</div>
			<div id="share_fileList_tbody" ></div>
			<div style="width:735px;min-height:5px;"></div>
		</div>
	 <!-- 上传完成后弹出框 -->
	<div id="upload_dialog" style="display:none;">
		<div class="">
		<table>
		<tr>
		<td><span id="msg"></span></td>
		</tr>
		</table> 
		</div>
	</div>
		
		<!-- end content -->
		<jsp:include page="/footer.jsp"></jsp:include>

	</body>
</html>